<div class="top">
  <app-left-top-panel></app-left-top-panel>
</div>

<div class="bottom">
  <!--<button nz-button nzType="primary" (click)="open()">Open</button>
  <button nz-button nzType="primary" (click)="close()">close</button>-->
  <!-- <div class="video-wrap">
    <app-video-list></app-video-list>
  </div>


  <app-video-list></app-video-list> -->
  <div class="video-wrap">
    <!-- <div class="btn-arrow" (click)="arrowToggle = !arrowToggle" [ngClass]="arrowToggle ? 'arrow-up' : 'arrow-down'"></div> -->
    <div class="video-box" *ngFor="let item of videos">
      <app-map-video [monitorId]="item.id"></app-map-video>
    </div>
  </div>

  <div class="chart-wrap">
    <div class="tab" [ngClass]="{'st1': waterType=='1', 'st2': waterType=='2' }">
      <div (click)="tabChange('1')">引水</div>
      <div (click)="tabChange('2')">耗水</div>
    </div>
    <div class="chart-title">水情月度态势</div>
    <div class="chart-block">
      <div class="charts" echarts [options]="chartOpt" [merge]="chartMergeOpt" style="height: 150px;"></div>
    </div>
  </div>
</div>

<div class="point" [ngClass]="'point' + idx" *ngFor="let item of points;let idx = index">
  <img class="p-img icon-reservoir" (mouseenter)="item.eHover = true" (mouseleave)="item.eHover = false"
    (click)="item.eClick = !item.eClick" src="./assets/images/display/icon-reservoir.png" alt="">
  <div class="p-cont reservoir" [ngClass]="item.className" [hidden]="!(item.eHover || item.eClick)">
    <div class="title">
      <span>{{ item.stadiaName }}</span>
    </div>
    <ul>
      <li>
        <span>入库：{{ item.fluxIncome }}m³/s</span>
        <span>出库：{{ item.fluxOut }}m³/s</span>
      </li>
      <li>水位：{{ item.heightInside }}m</li>
    </ul>
  </div>
</div>
<div class="point" [ngClass]="'point2_' + idx" *ngFor="let item of points2;let idx = index">
  <img class="p-img icon-section" (mouseenter)="item.eHover = true" (mouseleave)="item.eHover = false"
    (click)="item.eClick = !item.eClick" src="./assets/images/display/icon-section.png" alt=""
    [style.transform]="'rotate(' + item.angle + 'deg)'">
  <div class="p-cont section" [ngClass]="item.className" [hidden]="!(item.eHover || item.eClick)">
    <div class="title">
      <span>{{ item.stadiaName }}</span>
    </div>
    <ul>
      <li>
        <span>水位：{{ item.waterHeight }}m</span>
        <span>流量：{{ item.flux }}m³/s</span>
      </li>
    </ul>
  </div>
</div>
